<template>
    <div class="questionbox">
        <div class="head flex item-center" style="margin: 10px 0;">
        <div class="number bold black" style="margin-right: 5px;">{{ currentNum }}/{{ total }}、</div>
        <div class="flex">
            <div v-html="question.title"></div>
            <div>{{ '（' + question.score + '分）' }}</div>
        </div>
    </div>
    <!-- 单选 -->
    <div class="content" v-if="question.question_type == '0'">
        <ul>
            <li  v-for="item of question.optionsList" :key="item.id" >
                <el-radio @input="changeUanswer" v-model="question.uanswer" :label="item.code">
                    <div style="display: inline-block;" v-html="item.answer"></div>
                </el-radio>
            </li>
        </ul>
        
    </div>
    <!-- 判断题 -->
    <div class="content" v-if="question.question_type == '1'">
        <!--  -->
        <ul >
            <li>
                <el-radio @input="changeUanswer" v-model="question.uanswer" label="Y">
                    正确
                </el-radio>
            </li>
            <li>
                <el-radio @input="changeUanswer" v-model="question.uanswer" label="N">
                    错误
                </el-radio>
            </li>
        </ul>
    </div>
    <!-- 多选题 -->
    <div class="content" v-if="question.question_type == '2'">
        <el-checkbox-group v-model="checkList">
            <ul>
                <li  v-for="item of question.optionsList" :key="item.id" >
                    <el-checkbox  :label="item.code">
                        <div style="display: inline-block;" v-html="item.answer"></div>
                    </el-checkbox>
                </li>
            </ul>
        </el-checkbox-group>
        <el-button  class="submit-btn" @click="handleSubmit()">确认提交</el-button>
        
    </div>
    <!-- 问答 -->
    <div class="content" v-if="question.question_type == '3'">
        <el-input
            type="textarea"
            :rows="5"
            resize="none"
            placeholder="请输入内容"
            v-model="inputText">
        </el-input>
        <el-button class="submit-btn" @click="handleSubmit()">确认提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        total: {
            type: Number,
            default: 1
        },
        currentNum: {
            type: Number,
            default: 1
        },
        question: {
            type: Object,
            require: true,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            checkList: [],
            inputText: ''
        }
    },
    methods: {
        changeUanswer(val) {
            console.log(val)
            this.$emit('changeUanswer', val)
        },
        handleSubmit() {
            if (this.question.question_type == '2') {
                this.question.uanswer = this.checkList.toString()
                this.changeUanswer(this.question.uanswer)
            } else if (this.question.question_type == '3') {
                if (!this.inputText || !this.inputText.trim().length) {
                    return this.$message.warning('请输入内容')
                }
                this.question.uanswer = this.inputText.trim()
                this.changeUanswer(this.question.uanswer)

            }
        }
    },
    watch: {
        question: {
            deep: true,
            handler(val) {
                if (val.question_type == '2') {
                    if (val.uanswer) {
                        const list = val.uanswer.split(',')
                        for (let i = 0 ; i < list.length ;i++) {
                            this.$set(this.checkList, i ,list[i])
                        }
                    }
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    ul {
        li {
            padding: 10px 0;
        }
    }
    .submit-btn {
        margin-top: 10px;
    }
}
</style>